<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane name="待支付">
      <template #label>
        <span class="custom-tabs-label">
          <span class="label">待支付</span>
        </span>
      </template>
    </el-tab-pane>
    <el-tab-pane name="待发货">
      <template #label>
        <span class="custom-tabs-label">
          <span class="label">待发货</span>
        </span>
      </template>
    </el-tab-pane>
    <el-tab-pane name="待收货">
      <template #label>
        <span class="custom-tabs-label">
          <span class="label">待收货</span>
        </span>
      </template>
    </el-tab-pane>
    <el-tab-pane name="已收货">
      <template #label>
        <span class="custom-tabs-label">
          <span class="label">已收货</span>
        </span>
      </template>
    </el-tab-pane>
  </el-tabs>

  <div v-if="tableList.length > 0" class="table">
    <!-- 表格展示 -->
    <el-table :data="tableList" stripe style="width: 100%" v-loading="tableLoading">
      <el-table-column prop="id" label="订单编号" />
      <el-table-column prop="address.name" label="收货人" />
      <el-table-column label="地址" width="200" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.address.province }}{{ scope.row.address.city }}{{ scope.row.address.area }}{{
            scope.row.address.specific }}
        </template>
      </el-table-column>
      <el-table-column prop="goods.name" label="商品名称" />
      <el-table-column label="商品图片">
        <template #default="scope">
          <el-image :src="scope.row.goods.picture" width="80" />
        </template>
      </el-table-column>
      <el-table-column prop="goods.price" label="价格" />
      <el-table-column prop="num" label="数量" />
      <el-table-column label="订单金额" width="120">
        <template #default="scope">
          {{ scope.row.money }} 元
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="下单时间" width="190" />
      <el-table-column prop="payTime" v-if="activeName == '待发货'" label="支付时间" width="190" />
      <el-table-column prop="shippingTime" v-if="activeName == '待收货'" label="发货时间" width="190" />
      <el-table-column prop="completeTime" v-if="activeName == '已收货'" label="收货时间" width="190" />
      <el-table-column v-if="activeName == '待支付' || activeName == '待收货'" fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button v-if="activeName == '待支付'" link type="primary" size="small"
            @click="showPayment(scope.row.id)">支付</el-button>
          <el-button v-if="activeName == '待支付'" link type="danger" size="small"
            @click="deleteIndent(scope.row.id)">删除订单</el-button>
          <el-button v-if="activeName == '待收货'" link type="primary" size="small"
            @click="receive(scope.row.id)">收货</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div v-if="tableList.length > 0" style="float: right">

    <!-- 分页 -->
    <el-pagination v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
      :total="pageInfo.total" :disabled="false" background
      layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
  <!-- 空状态 -->
  <div v-if="tableList.length <= 0">
    <el-empty description="暂无数据" />
  </div>

  <!-- 订单弹出框 -->
  <el-dialog v-model="indentDialogVisible" width="50%">

    <el-descriptions class="margin-top" title="支付页面" :column="3" :size="3" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            商品名称
          </div>
        </template>
        <div>
          {{ indentData.goods.name }}
        </div>
        
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            图片
          </div>
        </template>
        <el-image style="width:80px" fit="fit" :src="indentData.goods.picture"></el-image>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            单价
          </div>
        </template>
        {{ indentData.goods.price }} 元
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            付款人
          </div>
        </template>
        <el-tag size="small">{{ indentData.user.name }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            收货人
          </div>
        </template>
        <el-tag size="small">{{ indentData.address.name }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <office-building />
            </el-icon>
            收货地址
          </div>
        </template>
        {{ indentData.address.province }}{{ indentData.address.city }}{{ indentData.address.area }}{{
          indentData.address.specific }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            订单金额
          </div>
        </template>
        {{ indentData.money }} 元
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            余额
          </div>
        </template>
        {{ indentData.user.balance }} 元
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="payMent">
          支付
        </el-button>
        <el-button type="info" @click="indentDialogVisible = false">
          取消
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { pageList, deleteById, getById, payIndent, receipt } from '@/api/indent.js';
import { ElMessageBox,ElMessage, ElLoading,ElNotification } from 'element-plus';
import {useStore} from "vuex";
// 分页数据
const pageInfo = reactive({
  total: 0,
  pageNum: 1,
  pageSize: 8,
});
// 搜索表单
const searchForm = reactive({
  indentId: null,
  userName: null,
  goodsName: null,
  addressName: null,
  status: '待支付'
})

// 表格加载
const tableLoading = ref(false);
// 表格数据
const tableList = ref([])
// 标签事件
const activeName = ref('待支付');

// 订单数据显示
const indentDialogVisible = ref(false);
const store = useStore()
const indentData = reactive({
  address: {},
  addressId: null,
  completeTime: null,
  createTime: null,
  goods: {},
  goodsId: null,
  id: null,
  money: null,
  num: null,
  payTime: null,
  shippingTime: null,
  status: null,
  updateTime: null,
  user: {},
  userId: null
})

onMounted(async () => {
  if(!store.state.user){
    ElMessage({
      type: "warning",
      message: "请先登录!"
    });
    window.location.href = "/"
  }else{
    await search();
  }
  
})

// 支付
const payMent = async()=>{
  // 开启加载
  const loading = ElLoading.service({ fullscreen: true });
  await payIndent(indentData.id);
  // 关闭弹框
  indentDialogVisible.value = false;
  loading.close();
  await search()
}

// 删除订单
const deleteIndent = async (id) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除订单吗?',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    await deleteById(id);
    // 删除后，重新刷新列表
    await search();
  } catch (e) {
  }
}

// 显示待支付订单
const showPayment = async (id) => {
  indentDialogVisible.value = true;

  // 1. 根据id查询订单数据，并开启展示
  const response = await getById(id)
  // 赋值
  const data = response.data.data;
  indentData.address = data.address;
  indentData.addressId = data.addressId;
  indentData.completeTime = data.completeTime;
  indentData.createTime = data.createTime;
  indentData.goods = data.goods;
  indentData.goodsId = data.goodsId;
  indentData.id = data.id;
  indentData.money = data.money;
  indentData.num = data.num;
  indentData.payTime = data.payTime;
  indentData.shippingTime = data.shippingTime;
  indentData.status = data.status;
  indentData.updateTime = data.updateTime;
  indentData.user = data.user;
  indentData.userId = data.userId;
}

// 收货
const receive = async (id) => {
  const loading = ElLoading.service({ fullscreen: true });
  await receipt(id);
  loading.close();
  // 通知
  ElNotification({
    title: '成功',
    message: '收货成功!',
    type: 'success',
  })
  await search();
}



// 点击事件
const handleClick = async (pane) => {
  // 修改状态
  activeName.value = pane.paneName;
  // 查询
  await search();
}

// 搜索订数据
const search = async () => {
  searchForm.status = activeName.value;
  try {
    // 开启加载
    tableLoading.value = true;
    const response = await pageList(pageInfo, searchForm);
    tableList.value = response.data.data.list;
    pageInfo.total = response.data.data.total;
  } finally {
    tableLoading.value = false;
  }
}
</script>

<style></style>